<template>
	<div>
		<!-- 导航栏 -->
		<div class="bgBox">
			<!-- logo -->
			<!-- <img src="" alt=""> -->
			<div class="headerBg margin_right3">
				<div class="header">
					<div class="flexleft">
						<div class="flexleft margin_right3 pointer" @click="isShow = !isShow">
							<div class="text_f color_fff">地区</div>
							<div class="bottom_icon"></div>
						</div>
						<div class="flexleft margin_right3 pointer" @click="isShow = !isShow">
							<div class="text_f color_fff">年级</div>
							<div class="bottom_icon"></div>
						</div>
						<div class="flexleft pointer">
							<div :class="tabActive == index ? 'actived margin_right3' : 'noActive margin_right3'"
								v-for="(item, index) in tabList" :key="index" @click="changeTab(item, index)">
								{{ item.name }}
							</div>
						</div>
					</div>
					<div class="flexleft">
						<!-- 搜索框 -->
						<div class="searchBox flexbetween">
							<input type="text" placeholder="请输入名称" v-model="keywords">
							<div class="iconBox flexcenter pointer" @click="goSearch">
								<img src="../static/image/components/search.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 已登录 -->
			<div class="flexleft">
				<!-- 消息 -->
				<div class="messageBox margin_right3 pointer" @click="goMessage">
					<img src="../static/image/components/bell.png" alt="">
					<!-- <div class="num">15</div> -->
				</div>
				<!-- <div class="userImg pointer" v-if="!userInfo">
					<img src="../static/image/mine/noUser.png" alt="">
				</div> -->
				<!-- 未登录 -->
				<div class="flexleft" v-if="!userInfo">
					<div class="loginBox margin_right2 pointer" @click="goLogin(1)">登录</div>
					<div class="registerBox pointer" @click="goLogin(2)">注册</div>
				</div>
				<div class="userImg pointer" v-else>
					<el-dropdown trigger="click" @command="handleCommand">
						<span class="el-dropdown-link">
							<img :src="userInfo.avatar" alt="">
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">个人中心</el-dropdown-item>
							<el-dropdown-item command="2">退出登录</el-dropdown-item>
							<!-- <el-popconfirm title="您确定要退出登录吗？" @confirm="getOutLogin">
								<el-button slot="reference">
									<el-dropdown-item command="2">退出登录</el-dropdown-item>
								</el-button>
							</el-popconfirm> -->
						</el-dropdown-menu>
					</el-dropdown>
					<!-- <div class="userPopup pointer" v-show="isOut">
						<div class="text_b color_six" @click="goMine">个人中心</div>
						<el-popconfirm title="您确定要退出登录吗？" @confirm="getOutLogin">
							<el-button slot="reference">
								<div>退出登录</div>
							</el-button>
						</el-popconfirm>
					</div> -->
				</div>
			</div>
		</div>
		<div style="height: 85px;"></div>
		<!-- 选择地区、学科 -->
		<div class="tabBox" v-if="isShow">
			<div class="contentBox">
				<el-form>
					<el-form-item label="城市地址">
						<el-cascader :options="options" :show-all-levels="false" v-model="cityInfo" @change="citychange"
							:props="{ label: 'text', value: 'value' }" placeholder="请选择城市"></el-cascader>
					</el-form-item>
				</el-form>
				<div class="flex" v-for="item in nianjiList" :key="item.period">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top">{{ item.period_text }}：</div>
					<div class="flexleft flex_wrap">
						<div class="text_d color_six itemBox margin_top2 pointer" @click="checknj(value)"
							:class="njInfo.id == value.id ? 'active' : 'noactive'" v-for="value in item.data"
							:key="item.id">
							{{ value.name }}</div>
					</div>
				</div>
				<div class="margin_left2 margin_top2">
					<el-form>
						<el-form-item label="学科">
							<el-cascader :options="subjectList" :show-all-levels="false" v-model="subjectInfo"
								@change="subjectchange" :props="{ label: 'name', value: 'id' }"
								placeholder="请选择学科"></el-cascader>
						</el-form-item>
					</el-form>
				</div>
				<div class="flexright margin_top">
					<el-button type="primary" @click="submit">确定</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { outLogin } from "@/API/login"
	import { getUserInfo } from "@/API/mine"
	import citys from "@/static/city/city.js"
	import {
		getGradeShow, getsubject
	} from "@/API/home"
	export default {
		data() {
			return {
				isOut: false,
				activeName: '1',
				isShow: false,
				tabActive: 0,
				keywords: "",
				tabList: [{
					name: "首页",
					path: "/",
				}, {
					name: "提问",
					path: "/questioning",
				}, {
					name: "论坛",
					path: "/forum",
				}, {
					name: "商城",
					path: "/shopping",
				}],
				cityInfo: [],//城市信息
				options: [],//城市列表
				nianjiList: [],//年级数据
				subjectInfo: [],//学科信息
				subjectList: [],//学科列表
				njInfo: {
					name: "",
					id: "",
					period: "",
				},
				userInfo: null,//用户信息
			}
		},
		watch: {
			$route(to, from) {
				console.log(to.path, "到哪去")
				console.log(from.path, "从哪来")
				let _this = this
				switch (to.path) {
					case "/":
						_this.tabActive = 0
						break;
					case "/questioning":
						_this.tabActive = 1
						break;
					case "/forum":
						_this.tabActive = 2
						break;
					case "/shopping":
						_this.tabActive = 3
						break;
				}
			}
		},
		created() {
			let data = JSON.parse(JSON.stringify(citys.data))
			data.forEach(item => {
				item.children.forEach(ite => {
					delete ite.children
				})
			})
			this.options = data
			switch (this.$route.path) {
				case "/":
					this.tabActive = 0
					break;
				case "/questioning":
					this.tabActive = 1
					break;
				case "/forum":
					this.tabActive = 2
					break;
				case "/shopping":
					this.tabActive = 3
					break;
			}
			let cityInfo = localStorage.getItem("cityInfo")
			if (cityInfo) {
				this.cityInfo = JSON.parse(cityInfo)
			}
			let njInfo = localStorage.getItem("njInfo")
			if (njInfo) {
				this.njInfo = JSON.parse(njInfo)
			}
			let subjectInfo = localStorage.getItem("subjectInfo")
			if (subjectInfo) {
				this.subjectInfo = JSON.parse(subjectInfo)
			}
			this.getnjlist()
			this.getsubjectList({
				city: this.cityInfo[1],
				period: this.njInfo.period,
				education_grade_id: this.njInfo.id
			})
			this.getInfo()
			this.$bus.$on("changePerson", data => {
				this.getInfo()
			})
		},
		methods: {
			submit() {
				localStorage.setItem("njInfo", JSON.stringify(this.njInfo))
				localStorage.setItem("cityInfo", JSON.stringify(this.cityInfo))
				localStorage.setItem("subjectInfo", JSON.stringify(this.subjectInfo))
				this.isShow = false
				// this.$bus.$emit("changemsg")
				let msg = {
					classInfo: this.njInfo,
					cityInfo: this.cityInfo,
					subjectInfo: this.subjectInfo
				}
				this.$bus.$emit("changemsg", msg)
			},
			checknj(item) {
				this.njInfo = {
					name: item.name,
					id: item.id,
					period: item.period
				}
				this.getsubjectList({
					city: this.cityInfo[1],
					period: this.njInfo.period,
					education_grade_id: this.njInfo.id
				})
			},
			async getnjlist() { //年级列表
				let res = await getGradeShow()
				console.log(res, "惊雷2");
				this.nianjiList = res.data.data
			},
			async getsubjectList(data) { //学科列表
				let res = await getsubject(data)
				this.subjectList = res.data.data
				console.log(res)
			},
			citychange(e) {
				// console.log(e,"惊雷");
				console.log(this.cityInfo)
			},
			subjectchange() {

			},
			async getInfo() {
				let res = await getUserInfo()
				console.log(res, "登录信息")
				if (res.data && res.data.code == 1) {
					this.userInfo = res.data.data
				}
			},
			changeTab(item, index) { //tab栏切换
				console.log(this.$route.path, "path555555555555555")
				this.isShow = false
				if (this.$route.path == item.path) {
					return false
				}
				this.tabActive = index
				this.$router.push({
					path: item.path
				})
			},
			goSearch() { //搜索
				console.log(this.$route)
				if (this.$route.path != "/search/searchList") {
					this.$router.push({
						path: "/search/searchList",
						query: {
							keywords: this.keywords
						}
					})
				} else {
					this.$bus.$emit("searchmsg", this.keywords)
				}
			},
			goMessage() { //消息
				this.$router.push({
					path: "/message"
				})
			},
			goMine() { //个人中心
				this.$router.push({
					path: "/mine/mineMessage"
				})
				this.isOut = false
			},
			handleCommand(command) {
				if (command == 1) {
					this.$router.push({
						path: "/mine/mineMessage"
					})
				} else {
					this.getOutLogin()
				}
			},
			goLogin(type) {
				this.$router.push({
					path: "/login",
					query: {
						type
					}
				})
			},
			async getOutLogin() { //退出登录
				let res = await outLogin()
				if (res.data.code == 1) {
					this.toast(res.data.msg)
					this.$router.push({
						path: "/login"
					})
					this.$store.commit("removeToken")
				} else {
					this.toast(res.data.msg, "warning")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox {
		width: 100%;
		height: 85px;
		/* // line-height: 85px; */
		background: #3478F5;
		box-shadow: 0px 4px 9px 0px rgba(52, 120, 245, 0.03);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.headerBg {
		width: 1200px;
		/* // min-width: 1200px;
		// max-width: 1200px; */
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.noActive {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #D1D1D1;
	}

	.actived {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: relative;
	}

	.actived::after {
		content: '';
		width: 20px;
		height: 2px;
		background: #FFFFFF;
		border-radius: 3px 3px 3px 3px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}

	/* 搜索框 */
	.searchBox {
		width: 319px;
		/* // height: 30px; */
		border-radius: 4px;
		border: 1px solid #FFFFFF;
		padding-left: 15px;

		input {
			height: 100%;
			background-color: #3478F5;
			color: #ffffff;
		}

		input::placeholder {
			color: #ffffff;
		}

		.iconBox {
			width: 39px;
			height: 30px;
			background: #FFFFFF;

			img {
				width: 20px;
				height: 20px;
			}
		}
	}

	/* 消息 */
	.messageBox {
		position: relative;

		img {
			width: 22px;
			min-width: 18px;
			height: 23px;
		}

		.num {
			padding: 1px;
			background: #FF0000;
			border-radius: 50%;
			position: absolute;
			top: -8px;
			right: -8px;
			font-size: 12px;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
		}
	}

	/* 头像 */
	.userImg {
		width: 30px;
		height: 30px;

		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	/* 头像弹窗 */
	.userPopup {
		/* // width: 100px;
		// height: 100px; */
		padding: 20px;
		background-color: #ffffff;
		position: absolute;
		top: 85px;
		right: 65px;

		::v-deep .el-button {
			border: none;
			padding: 0;
			font-size: 12px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 20px;
		}
	}

	.userPopup div:hover {
		color: #3478F5;
	}

	/* 登录 */
	.loginBox {
		padding: 5px 15px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #FFFFFF;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	/* 注册 */
	.registerBox {
		padding: 5px 15px;
		background: #FFFFFF;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #FFFFFF;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	/* 选择分类 */
	.tabBox {
		/* // height: 200px; */
		position: fixed;
		z-index: 100;
		top: 85px;
		left: 0;
		background: #F5F7FA;
		display: flex;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 0 40px;
	}

	.hideTab {
		display: none;
	}

	.showTab {
		display: block;
	}

	.contentBox {
		width: 1200px;
		/* // max-width: 1200px; */
	}

	.itemBox {
		padding: 0 10px;
		margin-right: 30px;
	}

	.noactive {
		padding: 10px;
		background: rgba(217, 217, 217, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.active {
		padding: 10px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}
</style>